<template>
  <div class="newsinfo_container" v-if="infolist !== null">
    <h1 class="title" v-text="infolist.title"></h1>
    <p class="subtitle">
      <span class="pubtime">发表时间：{{ infolist.add_time | dateFormat }}</span>
      <span class="click">点击：{{ infolist.click }}次</span>
    </p>
    <div class="content">{{ infolist.content }}</div>

    <cmt-box :id="id"></cmt-box>
  </div>
</template>

<script>
import { Toast } from 'mint-ui'
import CmtBox from '../../../subcomponents/comment'

export default {
  components: {
    CmtBox
  },
  name: 'newsinfo',
  data() {
    return {
      infolist: null,
      id: this.$route.params.id
    }
  },
  created() {
    this.$store.dispatch('getNewsInfo', this.id).then(res => {
      if(res.data.code === 200) {
        this.infolist = res.data.list[0]
      } else {
        Toast('数据加载失败')
      }
    })
  }
}
</script>

<style lang="less" scoped>
  .newsinfo_container {
    padding: 0 4px;

    .title {
      font-size: 16px;
      color: red;
      text-align: center;
      margin: 15px 0;
    }
    .subtitle {
      font-size: 13px;
      color: #226aff;
      padding-bottom: 10px;
      border-bottom: 2px solid #ddd;
      display: flex;
      justify-content: space-between;
    }
    .content {
      margin-bottom: 20px;
    }
  }
</style>
